<script setup>
import { toNumber, toString } from "lodash-es";
import CrosswiseBar from "../components/crosswiseBar.vue";
import { onMounted, ref } from "vue";
import { getJobfair } from "../../../api/stud";

defineProps(["data"]);

const grassrootsData = [
  {
    name: "关于2025年普通高校毕业生去向信息登记备案审核情况反馈意见整改报告",
    url: "https://szjy.cqedu.cn:8081/aizhxy/static/jcjyl_01.pdf",
  },
  {
    name: "渝水职院﹝2025﹞79号重庆水利电力职业技术学院关于2025届毕业生去向信息核实整改情况的报告",
    url: "https://szjy.cqedu.cn:8081/aizhxy/static/jcjyl_02.pdf",
  },
  {
    name: "重财职院〔2025〕127号重庆财经职业学院关于2025届毕业生去向信息登记备案核查反馈情况的整改报告",
    url: "https://szjy.cqedu.cn:8081/aizhxy/static/jcjyl_03.pdf",
  },
  {
    name: "重庆城市管理职业学院关于2025届毕业生就业统计市级审核问题的整改报告(0716)",
    url: "https://szjy.cqedu.cn:8081/aizhxy/static/jcjyl_04.pdf",
  },
  {
    name: "重庆科技大学2025届毕业生去向信息登记备案审核整改报告",
    url: "https://szjy.cqedu.cn:8081/aizhxy/static/jcjyl_05.pdf",
  },
  {
    name: "重庆三峡职业学院关于2025届毕业生就业数据全面核查的报告7.2",
    url: "https://szjy.cqedu.cn:8081/aizhxy/static/jcjyl_06.pdf",
  },
  {
    name: "重庆文理学院关于2025年普通高校毕业生去向信息登记备案审核整改情况报告",
    url: "https://szjy.cqedu.cn:8081/aizhxy/static/jcjyl_07.pdf",
  },
];
const CompileData = [
  {
    name: "四川外国语大学关于2025届毕业生去向信息登记备案审核整改情况的报告",
    url: "https://szjy.cqedu.cn:8081/aizhxy/static/kgkbl_01.pdf",
  },
  {
    name: "渝水职院﹝2025﹞长江师范学院核查整改报告",
    url: "https://szjy.cqedu.cn:8081/aizhxy/static/kgkbl_02.pdf",
  },
];
onMounted(() => {
  handleJobfair();
});

const jobfairData = ref([]);
async function handleJobfair() {
  const { data } = await getJobfair();
  jobfairData.value = data;
}

function handleGoURl(url) {
  window.open(url);
}
const jcck = (url) => {
  window.open(url);
};
</script>

<template>
  <div class="right">
    <div class="title bg1">
      <!-- <img src="../../../assets/images/detail.png" class="detailArrow" /> -->
    </div>
    <div class="box1">
      <div class="box-c-c1">
        <img src="../../../assets/images/yuan.png" class="icon1" />
        <span>招聘会</span>
        <!-- <img src="../../../assets/images/aiBtn.png" class="icon2" /> -->
      </div>
      <div class="box1_c">
        <vue3-seamless-scroll
          hover-stop="true"
          :list="jobfairData"
          hover="true"
          step="0.2"
          :limit-scroll-num="2"
        >
          <div
            class="box1_c_item"
            v-for="(item, index) in jobfairData"
            :key="index"
          >
            <div class="box1_c_item_a text-c9-55-14" :title="item.title">
              {{ item.title }}
            </div>
            <div class="box1_c_item_b text-c9-55-14" :title="item.soure">
              {{ item.soure }}
            </div>
            <div class="box1_c_item_c text-c9-55-12" :title="item.time">
              {{ item.time }}
            </div>
            <div
              class="box1_c_item_d text-4b-65-14"
              @click="handleGoURl(item.url)"
            >
              查看
            </div>
          </div>
        </vue3-seamless-scroll>
      </div>
    </div>
    <div class="title bg2">
      <!-- <img src="../../../assets/images/detail.png" class="detailArrow" /> -->
    </div>
    <div class="box2">
      <div class="box2_c">
        <div class="box-c-c1">
          <img src="../../../assets/images/yuan.png" class="icon1" />
          <span>大学生就业情况</span>
          <!-- <img src="../../../assets/images/aiBtn.png" class="icon2" /> -->
        </div>
        <div class="box1_b_c">
          <div class="box1_b_c_name">毕业生去向落实占比</div>
          <div class="box1_b_c_l"></div>
          <div class="box1_bW_c_num">
            <span class="text-gradual-blue-20">{{ data?.bys_ls || "--" }}</span>
            <!-- <span class="text-c9-55-12">%</span> -->
          </div>
        </div>
        <div class="box_centre_s_l_"></div>
        <div class="box1_b_c">
          <div class="box1_b_c_name">毕业生留渝占比</div>
          <div class="box1_b_c_l"></div>
          <div class="box1_bW_c_num">
            <span class="text-gradual-blue-20">{{
              data?.bys_ls_cq || "--"
            }}</span>
            <!-- <span class="text-c9-55-12">%</span> -->
          </div>
        </div>
        <div class="box_centre_s_l_"></div>
        <div class="box1_b_c">
          <div class="box1_b_c_name">政策性岗位招录占比</div>
          <div class="box1_b_c_l"></div>
          <div class="box1_bW_c_num">
            <span class="text-gradual-blue-20">{{
              toString(data?.bys_ls_zc) || "--"
            }}</span>
            <span class="text-gradual-blue-20">%</span>
          </div>
        </div>
      </div>
      <div class="box2_c">
        <div class="box-c-c1">
          <!-- <img src="../../../assets/images/yuan.png" class="icon1" /> -->
          <!-- <span>大学生就业留渝情况</span> -->
          <!-- <img src="../../../assets/images/aiBtn.png" class="icon2" /> -->
        </div>
        <div class="box1_b_c">
          <div class="box1_b_c_name">实际升学人数</div>
          <div class="box1_b_c_l"></div>
          <div class="box1_bW_c_num">
            <span class="text-gradual-blue-20">{{
              data?.bys_ls_sx || "--"
            }}</span
            ><span class="text-c9-55-12">人</span>
          </div>
        </div>
        <div class="box_centre_s_l_"></div>
        <div class="box1_b_c">
          <div class="box1_b_c_name">实际考公考编人数</div>
          <div class="box1_b_c_l"></div>
          <div class="box1_bW_c_num">
            <span class="text-gradual-blue-20">{{
              data?.bys_ls_kg || "--"
            }}</span
            ><span class="text-c9-55-12">人</span>
          </div>
        </div>
      </div>
    </div>
    <div class="title bg3">
      <!-- <img src="../../../assets/images/detail.png" class="detailArrow" /> -->
    </div>
    <div class="box3">
      <div class="box3_c">
        <div class="box3_c_title">
          <span class="text-c9-55-14">基层就业签约人数占毕业生人数比</span>
          <span class="text-gradual-yellow-18 m_l_4">{{
            data?.bys_ls_jc || "--"
          }}</span>
        </div>
        <div class="box3_c_jdt">
          <CrosswiseBar
            :value="toNumber(data?.bys_ls_jc.replace('%', ''))"
          ></CrosswiseBar>
        </div>
        <div class="box3_c_table">
          <div class="box3_c_table_item">
            <div class="box3_c_table_a text-c9-55-14">序号</div>
            <div class="box3_c_table_b text-c9-55-14">整改报告</div>
            <div class="box3_c_table_c text-c9-55-14">操作</div>
          </div>
          <vue3-seamless-scroll
            hover-stop="true"
            :list="grassrootsData"
            hover="true"
            step="0.2"
            :limit-scroll-num="2"
            class="scroll-box"
          >
          <div
            class="box3_c_table_item box3_c_table_item_"
            v-for="(item, index) in grassrootsData"
            :key="item.name"
          >
            <div class="box3_c_table_a text-c9-55-14">{{ index + 1 }}</div>
            <div class="box3_c_table_b text-gray-14" :title="item.name">
              {{ item.name }}
            </div>
            <div class="box3_c_table_c text-4b-65-14" @click="jcck(item.url)">
              查看
            </div>
          </div>
          </vue3-seamless-scroll>
          
          <!-- <div class="box3_c_table_item box3_c_table_item_">
            <div class="box3_c_table_a text-c9-55-14">2</div>
            <div class="box3_c_table_b text-gray-14">XXXXX高校就业指导文件</div>
            <div class="box3_c_table_c text-4b-65-14">查看</div>
          </div>
          <div class="box3_c_table_item box3_c_table_item_">
            <div class="box3_c_table_a text-c9-55-14">3</div>
            <div class="box3_c_table_b text-gray-14">XXXXX高校就业指导文件</div>
            <div class="box3_c_table_c text-4b-65-14">查看</div>
          </div> -->
        </div>
      </div>
      <div class="box3_c">
        <div class="box3_c_title">
          <span class="text-c9-55-14">考公考编签约人数占毕业生人数比</span>
          <span class="text-gradual-yellow-18 m_l_4">{{
            data?.bys_ls_kb || "--"
          }}</span>
        </div>
        <div class="box3_c_jdt">
          <CrosswiseBar
            :value="toNumber(data?.bys_ls_kb.replace('%', ''))"
          ></CrosswiseBar>
        </div>
        <div class="box3_c_table">
          <div class="box3_c_table_item">
            <div class="box3_c_table_a text-c9-55-14">序号</div>
            <div class="box3_c_table_b text-c9-55-14">整改报告</div>
            <div class="box3_c_table_c text-c9-55-14">操作</div>
          </div>
          <div
            class="box3_c_table_item box3_c_table_item_"
            v-for="(item, index) in CompileData"
            :key="item.name"
          >
            <div class="box3_c_table_a text-c9-55-14">{{ index + 1 }}</div>
            <div class="box3_c_table_b text-gray-14" :title="item.name">
              {{ item.name }}
            </div>
            <div class="box3_c_table_c text-4b-65-14" @click="jcck(item.url)">
              查看
            </div>
          </div>
          <!-- <div class="box3_c_table_item box3_c_table_item_">
            <div class="box3_c_table_a text-c9-55-14">2</div>
            <div class="box3_c_table_b text-gray-14">XXXXX高校就业指导文件</div>
            <div class="box3_c_table_c text-4b-65-14">查看</div>
          </div>
          <div class="box3_c_table_item box3_c_table_item_">
            <div class="box3_c_table_a text-c9-55-14">3</div>
            <div class="box3_c_table_b text-gray-14">XXXXX高校就业指导文件</div>
            <div class="box3_c_table_c text-4b-65-14">查看</div>
          </div> -->
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.right {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  .title {
    width: 100%;
    height: 2.75rem;
    display: flex;
    align-items: center;
    position: relative;
    .detailArrow {
      width: 21px;
      height: 18px;
      position: absolute;
      right: 12px;
      cursor: pointer;
    }
  }
  .bg1 {
    background: url(../../../assets/images/title1_4.png) no-repeat;
    background-size: 100% 100%;
  }
  .bg2 {
    background: url("../../../assets/images/title1_5.png") no-repeat;
    background-size: 100% 100%;
  }
  .bg3 {
    background: url("../../../assets/images/title1_6.png") no-repeat;
    background-size: 100% 100%;
  }
  .box1 {
    width: 100%;
    height: 158px;
    padding: 0 0 0 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    .box-c-c1 {
      width: 100%;
      height: 38px;
      display: flex;
      align-items: center;
      gap: 6px;
      font-family: "Alibaba PuHuiTi 2.0-85 Bold";
      font-size: 16px;
      color: #c9e9f8;
    }
    .box1_c {
      width: 100%;
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 2px;
      overflow: hidden;

      .box1_c_item {
        flex-shrink: 0;
        width: 100%;
        height: 36px;
        display: flex;
        padding: 0 0 0 12px;
        gap: 10px;
        .box1_c_item_a {
          width: 25%;
          height: 100%;
          // display: flex;
          // align-items: center;
          line-height: 36px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
        .box1_c_item_b {
          width: 40%;
          height: 100%;
          // display: flex;
          // align-items: center;
          line-height: 36px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
        .box1_c_item_c {
          width: 45%;
          height: 100%;
          // display: flex;
          // align-items: center;
          line-height: 36px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
        .box1_c_item_d {
          width: 10%;
          height: 100%;
          // display: flex;
          // align-items: center;
          line-height: 36px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          cursor: pointer;
        }
      }
      .box1_c_item:nth-of-type(2n) {
        background: rgba(255, 255, 255, 0.1);
      }
      .box1_c_item:nth-of-type(2n + 1) {
        background: rgba(255, 255, 255, 0.05);
      }
    }
  }
  .box2 {
    width: 100%;
    height: 232px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    .box2_c {
      width: 100%;
      height: 112px;
      padding: 0 0 0 12px;
      display: flex;
      flex-wrap: wrap;
      background: rgba(9, 54, 100, 0.3);
      .box-c-c1 {
        width: 100%;
        height: 38px;
        display: flex;
        align-items: center;
        gap: 6px;
        font-family: "Alibaba PuHuiTi 2.0-85 Bold";
        font-size: 16px;
        color: #c9e9f8;
      }
      .box1_b_c {
        flex: 1;
        height: 74px;

        .box1_b_c_name {
          width: 100%;
          height: 26px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          font-family: "Alibaba PuHuiTi 2.0-65 Medium";
          font-size: 14px;
          color: #c9e9f8;
          line-height: 26px;
        }
        .box1_b_c_l {
          width: 100px;
          border-radius: 0px 0px 0px 0px;
          border: 1px solid;
          border-image: linear-gradient(
              90deg,
              rgba(201, 233, 248, 0.4),
              rgba(201, 233, 248, 0)
            )
            1 1;
        }
        .box1_b_c_num {
          width: 100%;
          height: 32px;
          display: flex;
          align-items: center;
        }
      }
    }
  }
  .box3 {
    width: 100%;
    height: 408px;

    display: flex;
    flex-direction: column;
    gap: 12px;
    .box3_c {
      width: 100%;
      height: 50%;
      padding: 0 0 0 12px;
      display: flex;
      flex-direction: column;
      .box3_c_title {
        width: 100%;
        height: 36px;
        background: url("@/assets/images/fpzg_tit_bg.png") no-repeat;
        background-size: 100% 88%;
        padding: 0 0 0 12px;
        display: flex;
        align-items: center;
      }
      .box3_c_jdt {
        width: 100%;
        height: 25px;
      }
      .box3_c_table {
        width: 100%;
        flex: 1;
        overflow: auto;
        .box3_c_table_item {
          width: 100%;
          height: 30px;
          display: flex;
          .box3_c_table_a {
            width: 10%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
          }
          .box3_c_table_b {
            width: 75%;
            height: 100%;
            // display: flex;
            // align-items: center;
            // justify-content: center;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            line-height: 30px;
            padding: 0 0 0 4px;
            flex: 1;
            min-width: 0;
          }
          .box3_c_table_c {
            width: 15%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
          }
        }
        .box3_c_table_item_:nth-of-type(2n) {
          background: rgba(255, 255, 255, 0.1);
        }
        .box3_c_table_item_:nth-of-type(2n + 1) {
          background: rgba(255, 255, 255, 0.05);
        }
      }
    }
  }
  .box-bg {
    background: rgba(9, 54, 100, 0) !important;
  }
  .op {
    opacity: 0.6;
  }

  .pos1 {
    position: absolute;
    left: 93px;
    top: 10px;
  }
  .pos2 {
    position: absolute;
    left: 230px;
    top: 10px;
  }
  .pos3 {
    position: absolute;
    left: 367px;
    top: 10px;
  }
  .arrow {
    width: 44px;
    height: 28px;
  }

  .icon1 {
    width: 20px;
    height: 20px;
  }
  .icon2 {
    width: 36px;
    height: 18px;
  }
}
.box_centre_s_l_ {
  height: 74px;
  border: 1px solid;
  border-image: linear-gradient(
      rgba(0, 178, 238, 0),
      rgba(0, 178, 238, 0.7),
      rgba(0, 178, 238, 0)
    )
    1 1;
  margin-right: 12px;
}
.jz {
  display: flex;
  align-items: center;
  justify-content: center;
}
.scroll-box {
  height: 120px;
  overflow: hidden;
  padding-top: 20px; /* ⬅️ 给滚动区顶部留空间 */
}
</style>
